<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
        <style type="text/css">
            code { border: 1px solid #d1d1d1; background: #f0f0f0; }
            #root { border: 1px solid blue; }
        </style>
    </head>
    <body>

        <h3>事件处理</h3>
        <a href="https://v3.cn.vuejs.org/guide/events.html">事件处理</a>
        <ul>
            <li>采用 <code>v-on:type="listener"</code> 形式来绑定事件监听器</li>
            <li>采用 <code>@type="listener"</code> 形式来绑定事件监听器</li>
            <li>
                事件修饰符
                <ul>
                    <li>
                        <code>.stop</code> 阻止事件传播
                    </li>
                    <li>
                        <code>.prevent</code> 阻止事件默认行为
                    </li>
                    <li>
                        <code>.capture</code> 表示在事件捕获阶段调用监听器
                    </li>
                    <li>
                        <code>.self</code> 仅当事件发生在元素本身(而不是子元素)时才调用监听器
                    </li>
                    <li>
                        <code>.once</code> 表示事件仅触发一次
                    </li>
                </ul>
            </li>
            <li>
                按键修饰符
                <ul>
                    <li>
                        <code>.enter</code> 表示回车键
                    </li>
                    <li>.......</li>
                </ul>
            </li>
        </ul>

        <div id="root">
            <!-- 事件 `input` 是 原生事件 
                 可以通过 oninput 或 addEventListener('input' , h , false) 形式来监听 -->
            <input type="text" v-on:input="print">
            <p>message: {{ message }}</p>
            <hr>
            <textarea @input="display"></textarea>
            <hr>
            <a href="http://mail.163.com" @click.stop.prevent="handleMail">网易邮箱</a>
        </div>

        <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

        <script type="text/javascript">
            const options = {
                data(){
                    return {
                        message: ''
                    }
                },
                methods: {
                    print(evt){
                        let target = evt.target ;
                        let data = evt.data ;
                        console.log( target.value , data );
                        this.message = target.value ;
                    },
                    display(evt){
                        let value = evt.target.value ;
                        console.log( 'textarea: ' , value );
                    },
                    handleMail(evt){
                        console.log( evt );
                    }
                }
            }
            Vue.createApp(options).mount('#root');
        </script>
        
    </body>
</html>